<template>
  <div class="paramsLayer_wrap">
    <div class="paramsLayer">
      <p class="title">
        <!-- 请选择众筹回报 -->
        <span @click="close" class="iconfont icon-X"></span>
      </p>
      <div class="goodInfo-wrap">
        <div class="goodInfo">
          <img :src="goodInfo.image" alt="">
          <div class="textInfo">
            <h5 class="goodName">{{ goodInfo.name }}</h5>
            <p class="taocanIndex">{{ activeTcName }}</p>
            <div class="bottom_text">
              <span class="price">￥{{ activeTcPrice * count }}</span>
              <span class="places">{{ numPeople }}人已支持</span>
            </div>
          </div>
        </div>
      </div>
      <div class="preferences ">
        <h5>请选择众筹回报</h5>
        <ul>
          <li v-for="(item,index) in goodInfo.package" :key="index" :class="{ active: activeTcIndex == index }"
          @click="active(index,item)"
          >￥{{ item.price }}</li>
        </ul>
        <h5>支持份数</h5>
        <div class="numberBox">
          <input type="button" value="-" class="minus" @click="count > 1 ? count--: count">
          <span>{{ count }}</span>
          <input type="button" value="+" class="add" @click="count++">
        </div>
      </div>
      <input type="button" value="去支持" class="order" @click="order">
    </div>
  </div>
</template>

<script>
import { isLogin } from "@/api/index";
export default {
  data() {
    return {
      activeTcIndex: 1,
      activeTcName: "",
      activeTcPrice: "",
      count: 1
    };
  },
  mounted() {
    setTimeout(() => {
      // console.log(this.goodInfo.package[1])
      this.activeTcName = this.goodInfo.package[1].name;
      this.activeTcPrice = this.goodInfo.package[1].price;
    }, 1000);
  },
  props: ["goodInfo", "isWeixin","numPeople"],
  methods: {
    close() {
      this.$emit("close", false);
    },
    active(index, item) {
      this.activeTcIndex = index;
      this.activeTcName = item.name;
      this.activeTcPrice = item.price;
    },
    order() {
      // this.$router.push('/confirmOrder/31/' + this.count)
      if (this.isWeixin) {
        this.$router.push({
          name: "确认订单",
          params: {
            id: this.$store.state.urlParams.good_id,
            num: this.count,
            package: this.activeTcName,
            price: this.activeTcPrice,
            package_id: this.activeTcIndex
          }
        });
      } else {
        isLogin().then(result => {
          this.$store.commit('SETLOGINTYPE','h5')
          if (result.data.uid.length != 0) {
            this.$router.push({
              name: "确认订单",
              params: {
                id: this.$store.state.urlParams.good_id,
                num: this.count,
                package: this.activeTcName,
                price: this.activeTcPrice,
                package_id: this.activeTcIndex
              }
            });
          } else {
            this.$router.push({
              name: "登录",
              params: {
                id: this.$store.state.urlParams.good_id,
                num: this.count,
                package: this.activeTcName,
                price: this.activeTcPrice,
                package_id: this.activeTcIndex
              }
            });
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/base.scss";
.paramsLayer_wrap {
  background-color: rgba(0, 0, 0, 0.2);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  .paramsLayer {
    width: 100%;
    height: to(662);
    position: absolute;
    background: #fff;
    bottom: 0;
    .title {
      height: to(58);
      line-height: to(58);
      font-size: to(25);
      color: #373737;
      margin: 0;
      padding: 0 to(10);
      border-bottom: to(1) solid #fcfcfc;
      span {
        float: right;
        font-size: to(27);
      }
    }
    .goodInfo-wrap {
      padding: to(0) to(18);
      height: to(198);
      .goodInfo {
        width: 100%;
        height: 100%;
        img {
          width: to(168);
          height: to(168);
        }
        .textInfo {
          display: inline-block;
          float: right;
          width: to(436);
          padding-left: to(14);
          // height: ;
          h5 {
            font-size: to(27);
            line-height: to(50);
          }
          p {
            margin: 0;
            font-size: to(22);
            color: #8e8d8d;
            line-height: to(35);
          }
          .bottom_text {
            span {
              font-size: to(22);
              vertical-align: bottom;
              &.places {
                margin-left: 30%;
              }
              &.price {
                color: #aa0000;
                font-size: to(27);
              }
            }
          }
        }
      }
    }
    .preferences {
      h5 {
        // margin-top: to(20);
        font-size: to(25);
        line-height: to(48);
        color: #6e6e6e;
        padding-left: to(18);
      }
      ul {
        list-style: none;
        display: -webkit-flex;
        margin: 0;
        padding: to(18);
        li {
          font-size: to(22);
          margin-right: to(44);
          width: to(91);
          height: to(37);
          background-color: white;
          border: 1px solid #aa0000;
          border-radius: to(10);
          color: #aa0000;
          line-height: to(37);
          text-align: center;
          &.active {
            background-color: #aa0000;
            color: white;
          }
        }
      }
      .numberBox {
        display: -webkit-flex;
        width: to(144);
        height: to(48);
        margin: to(18);
        input,
        span {
          flex: 1;
          padding: 0;
          border: 0;
          font-size: to(32);
          text-align: center;
          line-height: to(48);
          background-color: #fff;
          border: 1px solid #b8b8b8;
          color: #6e6e6e;
          -webkit-appearance: none;
        }
        .minus {
          border-radius: 5px 0px 0px 5px;
        }
        .add {
          border-radius: 0px 5px 5px 0px;
        }
        span {
          border-left: 0;
          border-right: 0;
        }
      }
    }
    .order {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: to(85);
      color: white;
      font-size: to(30);
      background-color: #eb5454;
      border: 0;
      -webkit-appearance: none;
    }
  }
}
</style>
